<#import "macros/common.ftl" as common>

<@common.page>
    <table style="width:90%;margin-left:5%;margin-right:5%">
        <caption style="font-size: 125%;text-align:center;padding:0.25em;">{{Edit Broadcast}}</caption>
        <form class="editBroadcastForm" action="" method="post">
        	<tr>
                <td class="form-field-name" style="width:10%;">
                    {{Recipient providers}}:
                </td>
                <td style="width:90%">
                	<table style="margin:1em; width:100%">
                		<tr>
                		<td style="width:45%">
                			{{List of providers}}:
                			<select id="selectedProviders" multiple size="4"  name="emailProvidersId" style="width:100%">
               				<#list broadcast.recipientProviders as provider>
               					<option value="${provider.id}">${provider.title}</option>
               				</#list>
                			</select>
                		</td>
                		<td>
		            		<input id="addProvider" type="submit" value="&lt&lt&lt" style="margin:0.5em;"/><br/>
		            		<input id="removeProvider" type="submit" value="&gt&gt&gt" style="margin:0.5em;"/>
		            	</td>
                		<td style="width:45%">
                			{{Candidates}}:
                			<select id="freeProviders" multiple size="4" name="emailProvidersId2" style="width:100%">
               				<#list providers as provider>
               					<option value="${provider.id}">${provider.title}</option>
               				</#list>
                			</select>
                		</td>
                    	</tr>
                    </table>
                    <span class="error error__emailProvidersId"></span>
                </td>
            </tr>
            <tr>
                <td class="form-field-name" style="width:10%;">
                    {{Params}}:
                </td>
                <td style="width:90%">
                    <textarea class="textarea-in-table" name="templateParams" wrap="soft" >${broadcast.fields.templateParams}</textarea>
                     <span class="error error__templateParams"></span>
                </td>
            </tr>
            <tr>
                <td class="form-field-name">
                    {{Subject}}:
                </td>
                <td>
                    <textarea class="textarea-in-table" name="subjectTemplate" wrap="soft" >${broadcast.fields.subjectTemplate}</textarea>
                    <span class="error error__subjectTemplate"></span>
                </td>
            </tr>
            <tr>
                <td class="form-field-name">
                    {{Body}}:
                </td>
                <td>
                    <textarea class="textarea-in-table-large" name="bodyTemplate" wrap="soft" >${broadcast.fields.bodyTemplate}</textarea>
                    <span class="error error__bodyTemplate"></span>
                </td>
            </tr>
            <tr>
                <td class="form-field-name">
                    {{Test recipient provider response}}:
                </td>
                <td>
                    <textarea class="textarea-in-table" name="testEmailProviderResponse" wrap="soft" >${broadcast.fields.testEmailProviderResponse}</textarea>
                    <span class="error error__testEmailProviderResponse"></span>
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align:center;">
                    <input class="button" id="apply" type="submit" value="{{Apply}}">
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align:center;">
                    <input class="button" id="test" type="submit" value="{{Test}}">
                </td>
            </tr>
            <#if broadcast.fields.status=='SCHEDULING' || broadcast.fields.status=='SCHEDULED' || broadcast.fields.status=='PENDING'>
            <tr>
                <td colspan="2" style="text-align:center;">
	                <input style="width:20em;" class="textbox" name="scheduledTime" value="${scheduledTime}"><br>
                    <input class="button" id="schedule" type="submit" value="{{Schedule}}"><br>
                    <span class="error error__schedule"></span>
                </td>
            </tr>
            </#if>
        </form>
    </table>
    
<script type="text/javascript">
    $(function() {
    	$("#addProvider").click(function() {
    		var to = $("#selectedProviders");
    		$("#freeProviders > option:selected").each(
    		function()
    		{
    			$(this).appendTo(to);
    		}
    		);
    		return false;
    	});
    	$("#removeProvider").click(function() {
    		var to = $("#freeProviders");
    		$("#selectedProviders > option:selected").each(
    		function()
    		{
    			$(this).appendTo(to);
    		}
    		);
    		return false;
    	});
    	$("#test").click(function() {
    		var id = ${broadcast.fields.id};
    		$.post("broadcast", {action: "test", id: id}, function(json) {
                    if (json["success"] == "true") {
                    	alert("{{Check your mail}}!");
                    } else
                    {
                    	alert(json["error"]);
                    }
            	});
            return false;
    	});
    	$("#schedule").click(function() {
    		var id = ${broadcast.fields.id};
    		var scheduledTime = $("input[name='scheduledTime']").val();
    		var msg = "{{Schedule broadcast on}} '"+scheduledTime+"' ?";
			if (confirm(msg))
			{
	    		$.post("broadcast", {action: "schedule", id: id, scheduledTime: scheduledTime}, function(json) {
                    if (json["success"] == "true") {
                    	window.location = "dashboard";
                    } else
                    {
                    	$(".error__schedule").html(json["error"]);
                    }
            	});
            }
            return false;
    	});
        $("#apply").click(function() {
        		var id = ${broadcast.fields.id};
                var templateParams = $("textarea[name='templateParams']").val();
                var subjectTemplate = $("textarea[name='subjectTemplate']").val();
                var bodyTemplate = $("textarea[name='bodyTemplate']").val();
                var testEmailProviderResponse = $("textarea[name='testEmailProviderResponse']").val();
                var emailProvidersId = "";
                $("#selectedProviders > option").each(function(){
                	if (emailProvidersId.length>0) emailProvidersId += ",";
                	emailProvidersId+=this.value;
                }
                );

                $.post("broadcast", {action: "edit", id: id, templateParams: templateParams, subjectTemplate: subjectTemplate,  bodyTemplate:bodyTemplate, testEmailProviderResponse:testEmailProviderResponse, emailProvidersId: emailProvidersId}, function(json) {
                    if (json["success"] == "true") {
                        window.location.reload();
                    } else {
                        $("span").each(function() {
                            var e = $(this);
                            var classes = e.attr('class').split(" ");
                            for (var i = 0; i < classes.length; i++) {
                                if (json[classes[i]]) {
                                    $(this).text(json[classes[i]]).css("display", "block");
                                } else {
                                    $(this).text("").css("display", "none");
                                }
                            }
                        });
                    }
                }, "json");

                return false;
        });
    });
</script>
    
</@common.page>
